<template>
	<view class="cnt">
		<view class="status-box">
			<view>
				{{detail.statusStr}}
			</view>
			<image src="@/static/img/more.png" style="width: 50rpx; height: 50rpx;"></image>
		</view>
		<view class="detail-box">
			<view class="title-box">
				<view v-if="detailOpend">行程详情</view>
				<view v-else>
					{{detail.startShowAddress}}
					<image src="@/static/img/single-arrow-right.png" style="width: 34rpx; height: 14rpx;"></image>
					{{detail.endShowAddress}} 
				</view>
				<text class="iconfont icon-xiajiantou" @click="detailOpend=!detailOpend"></text>
			</view>
			<view v-if="detailOpend">
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view style="display: flex; justify-content: flex-start; align-items: center;">
						<image src="@/static/img/start-time.png" style="width: 26rpx; height: 26rpx;"></image>
						<view class="detail-time">
							{{detail.timeStr}}
						</view>
					</view>
					<view style="display: flex; justify-content: flex-start; align-items: center;">
						<view>
							预估{{detail.preAmount}}元
						</view>
						<image src="@/static/img/client-trip/pre-price.png" style="width: 35rpx; height: 35rpx;"></image>
					</view>
				</view>
				<view class="start-item">
					<view class="start-item-icon"></view>
					<view class="uni-input start-item-cnt">
						{{detail.startShowAddress}}
					</view>
				</view>
				<view class="end-item">
					<view class="end-item-icon"></view>
					<view class="uni-input end-item-cnt">
						{{detail.endShowAddress}}
					</view>
				</view>
				<view style="display: flex; justify-content: flex-start; align-items: center;">
					<image src="@/static/img/client-trip/renshu.png" style="width: 28rpx; height: 28rpx;"></image>
					<view>
						{{detail.personCntAdult ? detail.personCntAdult + '成人' : ''}}
						{{detail.personCntChildren ? detail.personCntChildren + '儿童' : ''}}
						{{detail.personCntInfant ? detail.personCntInfant + '婴幼儿' : ''}}
					</view>
				</view>
				<view v-if="detail.remark" style="display: flex; justify-content: flex-start; align-items: center;">
					<image src="@/static/img/client-trip/trip-remark.png" style="width: 28rpx; height: 28rpx;"></image>
					<view>
						{{detail.remark}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="detail.inviteList && detail.inviteList.length > 0">
			<view v-for="(item,index) in detail.inviteList" class="list-item">
				<view class="flex-base-b">
					<view class="i-starttime">{{item.receiveTimeStr}}接到你</view>
					<view class="i-match-percent">{{item.matchPercent}}%顺路</view>
				</view>
				<view class="i-seats">
					预留{{item.seats}}座位
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 40rpx;">
					<view class="flex-base" style="gap: 26rpx">
						<image :src="item.avatar" style="width: 97rpx; height: 97rpx; border-radius: 97rpx;"></image>
						<view style="display: flex; flex-direction: column; justify-content: space-between;">
							<view class="i-car-brand">
								{{item.carBrand}}
							</view>
							<view style="display: flex; justify-content: space-between; gap: 20rpx">
								<view class="i-scope">{{item.scope}}分</view>
								<view class="i-scope">|</view>
								<view class="i-cancel-percent">取消率{{item.cancelPercent}}%</view>
							</view>
						</view>
					</view>
					<view style="display: flex; justify-content: right; gap: 30rpx;">
						<image src="@/static/img/icon-phone.png" style="width: 49rpx; height: 50rpx;" @click="toCall(item.mobile)"></image>
						<image src="@/static/img/icon-msg.png" style="width: 47rpx; height: 50rpx;" @click="toSendMsg(item)"></image>
					</view>
				</view>
				<view v-if="item.username" class="i-username">{{item.username}}</view>
				<view class="i-status-box">
					<view class="i-status">{{item.statusStr}}</view>
					<view class="i-btn-box">
						<view class="cancel-btn" @click="toRejectOrder(item)">拒绝</view>
						<view class="match-btn" @click="toAck(item)">确认同行</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!detail.inviteList && detail.matchWayList && detail.matchWayList.length > 0" class="sfc-list-box">
			<view class="list-title">寻找顺风车</view>
			<view class="list-item" v-for="(item,index) in detail.matchWayList">
				<view style="display: flex; justify-content: space-between; height: 97rpx;">
					<image :src="item.avatar" style="width: 97rpx; height: 97rpx; border-radius: 97rpx;"></image>
					<view style="display: flex; flex-direction: column; justify-content: space-between;">
						<view style="display: flex; justify-content: space-between; gap: 20rpx">
							<view class="m-time">{{item.startTimeStr}}</view>
							<view class="m-match-way">{{item.matchPercent}}%顺路</view>
						</view>
						<view style="display: flex; align-items: center; gap: 20rpx">
							<view class="m-scope">{{item.scope}}分</view>
							<view class="m-scope">|</view>
							<view class="m-scope">取消率{{item.cancelPercent}}%</view>
						</view>
					</view>
					<view class="m-seats">￥{{item.preAmount}}/座</view>
				</view>
				<view class="start-item" style="margin-top: 30rpx;">
					<view class="start-item-icon"></view>
					<view class="uni-input start-item-cnt">
						{{item.startShowAddress}}
						<text class="m-km">
							{{item.startDistance ? ' ' + item.startDistance + 'km' : ''}}
						</text>
					</view>
				</view>
				<view style="display: flex; justify-content: space-between; margin-top: 30rpx;">
					<view class="end-item">
						<view class="end-item-icon"></view>
						<view class="uni-input end-item-cnt">
							{{item.endShowAddress}}
							<text class="m-km">
								{{item.endDistance ? ' ' + item.endDistance + 'km' : ''}}
							</text>
						</view>
					</view>
					<view style="display: flex; justify-content: right; gap: 30rpx;">
						<image src="@/static/img/icon-phone.png" style="width: 49rpx; height: 50rpx;" @click="toCall(item.mobile)"></image>
						<image src="@/static/img/icon-msg.png" style="width: 47rpx; height: 50rpx;" @click="toSendMsg(item)"></image>
					</view>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 30rpx; padding-top: 20rpx; border-top: 1rpx solid #DFDFDF;">
					<view class="wait-pay-txt">{{item.statusStr}} <text v-if="1===item.status">￥{{item.preAmount}}</text></view>
					<view v-if="0===item.status || 1===item.status" class="cancel-btn" @click="toCancelOrder(item)">取消</view>
					<!-- <view v-if="0===item.status" class="wait-confirm-tag">30:00</view> -->
					<view v-if="1===item.status" class="pay-btn" @click="orderPre(item.orderId)">立即支付</view>
					<view v-if="-1===item.status" class="match-btn" @click="toMatch(item)">确认同行</view>
				</view>
			</view>
		</view>
		<view v-if="(!detail.inviteList || detail.inviteList.length <= 0) && (!detail.matchWayList || detail.matchWayList.length <= 0)" class="no-data-box">
			<image src="@/static/img/no-data.png" style="width: 412rpx; height: 304rpx;"></image>
			<view class="no-data-txt">暂未找到顺路车主</view>
		</view>
		
		<view v-if="showPayDialog" class="dialog-cnt">
			<view class="dialog-box">
				<view class="title">支付车费</view>
				<view class="pay-amt">￥{{orderPreInfo.payAmount}}</view>
				<view class="flex-base-b">
					<view class="label">订单信息</view>
					<view class="title-val">{{orderPreInfo.title}}</view>
				</view>
				<view class="flex-base-b">
					<view class="label">行程费用</view>
					<view class="value">{{orderPreInfo.tripAmount}}</view>
				</view>
				<view v-if="orderPreInfo.integralDeductAmount && orderPreInfo.integralDeductAmount > 0" class="flex-base-b">
					<view class="label">积分抵扣</view>
					<view class="value">-{{orderPreInfo.integralDeductAmount}}</view>
				</view>
				<view class="flex-base-b">
					<view class="label">支付方式</view>
					<view class="value">微信支付</view>
				</view>
				<view class="btn" @click="orderPay(orderPreInfo.orderId)">立即支付</view>
			</view>
			<image src="@/static/img/btn-bottom-close.png" style="width: 65rpx; height: 168rpx;" @click="toClosePay"></image>
		</view>
		
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="info" mode="base" title="确定放弃支付？" :duration="2000" :before-close="true" @close="exeClose" @confirm="exeConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getClientTripDetail,
		clientInviteDriver,
		clientCancelInviteDriver,
		clientOrderPre,
		clientOrderPay,
		clientRejectInviteDriver
		} 
		from '@/api/api.js';
	
	export default {
		data() {
			return {
				showPayDialog: false,
				detailOpend: false,
				detail:{},
				orderPreInfo:null,
				orderPayParam:null
			}
		},
		onLoad(option) {
			if(option && option.id){
				this.getDetail(option.id);
			}
		},
		methods: {
			getDetail(id){
				getClientTripDetail(id).then(res=>{
					this.detail = res.data;
				})
			},
			toCall(no){
				uni.makePhoneCall({
					phoneNumber: no
				});
			},
			toSendMsg(item){
				console.log('to msg')
			},
			toMatch(item){
				let p = {
					clientTripId: this.detail.id,
					driverTripId: item.driverTripId
				}
				clientInviteDriver(p).then(res=>{
					if(res && res.data){
						item.status = 0;
						item.statusStr = '等待车主确认';
						uni.navigateTo({
							url: '/pages/xyqc/sfc/client/wait-driver-confirm'
						})
					}
				})
			},
			toCancelOrder(item){
				let p = {
					clientTripId: this.detail.id,
					driverTripId: item.driverTripId
				}
				clientCancelInviteDriver(p).then(res=>{
					if(res && res.data){
						item.status = -1;
						item.statusStr = '正在寻找乘客';
					}
				})
			},
			toRejectOrder(item){
				clientRejectInviteDriver(item.orderId).then(res=>{
					if(res && res.data){
						this.getDetail(this.detail.id)
					}
				})
			},
			// 订单预算
			orderPre(orderId){
				let p = {
					orderId: orderId,
					payType:'yue'
				}
				clientOrderPre(p).then(res=>{
					this.showPayDialog = true;
					this.orderPreInfo = res.data;
				})
			},
			// 发起支付
			orderPay(orderId){
				let p = {
					orderId: orderId,
					payType:'yue'
				}
				clientOrderPay(p).then(res=>{
					if(res && res.data.ok){
						this.showPayDialog = false;
						this.orderPayParam = res.data;
						this.getDetail(this.detail.id);
					}
				})
			},
			toClosePay(){
				this.showPayDialog = false;
				this.$refs.popup.open();
			},
			exeClose(){
				this.showPayDialog = true;
				this.$refs.popup.close();
			},
			exeConfirm(){
				this.showPayDialog = false;
				this.$refs.popup.close();
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.cnt{
		background-color: #F6F6F6;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.status-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0rpx;
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.detail-box{
		padding: 30rpx 30rpx;
		background: #FFFFFF linear-gradient(180deg, #F7FFFA 0%, #FFFFFF 100%);
		border-radius: 21rpx;
	}
	.title-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.detail-time{
		height: 35rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 35rpx;
	}
	.start-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.start-item-icon{
		width: 17rpx;
		height: 17rpx;
		background: #6FC65E;
		border-radius: 16rpx;
	}
	.start-item-cnt{
		padding-left: 28rpx;
		flex: 1;
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
		
	}
	.end-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.end-item-icon{
		width: 17rpx;
		height: 17rpx;
		background: #EC7F2F;
		border-radius: 16rpx;
	}
	.end-item-cnt{
		padding-left: 28rpx;
		flex: 1;
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
	}
	
	.list-title{
		padding: 36rpx 0 16rpx 16rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.list-item{
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 21rpx;
		margin-top: 20rpx;
	}
	.sfc-list-box{
		display: flex;
		flex-direction: column;
	}
	.no-data-box{
		margin-top: 180rpx;
		text-align: center;
	}
	.no-data-txt{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 35rpx;
	}
	
	.wait-pay-txt{
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 47rpx;
	}
	.cancel-btn{
		width: 139rpx;
		height: 69rpx;
		border-radius: 42rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 69rpx;
		text-align: center;
	}
	/* .pay-btn{
		height: 69rpx;
		background: #6FC65E;
		border-radius: 42rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 69rpx;
		text-align: center;
	} */
	.wait-confirm-tag{
		width: 139rpx;
		height: 69rpx;
		background: #6FC65E;
		border-radius: 42rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 41rpx;
	}
	.match-btn,.pay-btn{
		width: 197rpx;
		height: 69rpx;
		background: #6FC65E;
		border-radius: 42rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 69rpx;
		text-align: center;
	}
	.m-time{
		height: 52rpx;
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 52rpx;
	}
	.m-match-way{
		height: 47rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 47rpx;
	}
	.m-seats{
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
	}
	.m-scope{
		height: 35rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 35rpx;
	}
	.m-km{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 35rpx;
	}
	
	.dialog-cnt{
		position: absolute;
		z-index: 999;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.6);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.dialog-box{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		.btn{
			background-color: #6FC65E;
			height: 90rpx;
			border-radius: 90rpx;
			text-align: center;
			font-size: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 90rpx;
		}
	}
	.title{
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 52rpx;
		text-align: center;
	}
	.pay-amt{
		font-size: 50rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 69rpx;
		text-align: center;
	}
	.flex-base-b{
		display: flex;
		justify-content: space-between;
		gap: 50rpx;
	}
	.label{
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.title-val{
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.value{
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
	}
	
	.i-starttime{
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.i-match-percent{
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.i-seats{
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 41rpx;
		margin-top: 10rpx;
	}
	.flex-base{
		display: flex;
	}
	.i-scope,.i-cancel-percent{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 35rpx;
	}
	.i-username{
		width: 108rpx;
		height: 42rpx;
		background: #6FC65E;
		border-radius: 21rpx;
		line-height: 42rpx;
		text-align: center;
	}
	
	.i-status-box{
		margin-top: 48rpx;
		border-top: 1rpx solid #DFDFDF;
	}
	.i-status{
		height: 80rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 80rpx;
		text-align: center;
	}
	.i-btn-box{
		display: flex;
		justify-content: flex-end;
		gap: 30rpx;
	}
	.i-car-brand{
		height: 47rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 47rpx;
	}
	
</style>
